<template>
  <a-modal
    v-model:visible="visible"
    title="新增菜单"
    title-align="start"
    :width="620"
    @before-ok="handleOk"
    :mask-closable="false"
  >
    <a-form ref="formRef" :model="addMenuForm" label-align="left">
      <a-form-item field="parentId" label="上级菜单">
        <a-tree-select
          :data="props.menuTree"
          :field-names="{ key: 'id', title: 'menuName', children: 'children' }"
          v-model="addMenuForm.parentId"
        ></a-tree-select>
      </a-form-item>
      <a-form-item
        field="menuName"
        label="菜单名称"
        :rules="[{ required: true, message: '菜单名称必填' }]"
      >
        <a-input v-model="addMenuForm.menuName"></a-input>
      </a-form-item>
      <a-form-item
        field="orderNum"
        label="显示排序"
        :rules="[{ required: true, message: '显示排序必填' }]"
      >
        <a-input v-model="addMenuForm.orderNum"></a-input>
      </a-form-item>
      <a-form-item
        field="url"
        label="路由地址"
        :rules="[{ required: true, message: '路由地址必填' }]"
      >
        <a-input v-model="addMenuForm.url"></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { addMenu } from "@/api/menu";
import { Message } from "@arco-design/web-vue";
import { ref } from "vue";

const props = defineProps({
  menuTree: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const visible = ref(false);
const formRef = ref();
const addMenuForm = ref({
  menuName: "",
  orderNum: "",
  url: "",
  parentId: "",
});
const handleOk = () => {
  formRef.value.validate(async (val: any) => {
    if (val == undefined) {
      try {
        let res = await addMenu(addMenuForm.value);
        if (res?.code == 200) {
          Message.success("添加成功");
        } else {
          Message.error(res?.msg || "添加失败");
        }
      } catch (error) {
        console.error(error);
      }
    }
  });
};
</script>

<style scoped></style>
